<html xmlns:th="http://www.thymeleaf.org">
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="StyleSheet" th:href="@{/css/login/userInfo.css}" type="text/css" media="screen"/>
</head>
<body>


<table>
    <h3 class="title">Account Information</h3>
    <tr><td></td></tr>
    <tr><td></td></tr>
    <tr>
        <td class="td">First name:</td>
        <td><input type="text" name="firstName" th:value="${account.firstName}" />
        </td>
    </tr>
    <tr>
        <td class="td">Last name:</td>
        <td><input type="text" name="lastName" th:value="${account.lastName}"/></td>
    </tr>
    <tr>
        <td class="td">Email:</td>
        <td><input type="text" name="email" th:value="${account.email}" /></td>
    </tr>
    <tr>
        <td class="td">Phone:</td>
        <td><input type="text" name="phone" th:value="${account.phone}"/></td>
    </tr>
    <tr>
        <td class="td">Address 1:</td>
        <td><input type="text" name="address1" th:value="${account.address1}"/></td>
    </tr>
    <tr>
        <td class="td">Address 2:</td>
        <td><input type="text" name="address2" th:value="${account.address2}" /></td>
    </tr>
    <tr>
        <td class="td">City:</td>
        <td><input type="text" name="city" th:value="${account.city}"/></td>
    </tr>
    <tr>
        <td class="td">State:</td>
        <td><input type="text" name="state" th:value="${account.state}"/></td>
    </tr>
    <tr>
        <td class="td">Zip:</td>
        <td> <input type="text" name="zip" th:value="${account.zip}"/>
        </td>
    </tr>
    <tr>
        <td class="td">Country:</td>
        <td><input type="text" name="country" th:value="${account.country}"/></td>
    </tr>
</table>



<table>
    <h3 class="title">Profile Information</h3>
    <tr><td></td></tr>
    <tr><td></td></tr>
    <tr>
        <td class="td">Language Preference:</td>
        <td>
            <select name="languagePreference">
                <option th:selected="${account == null || account.languagePreference == 'english'}" value="english">English</option>
                <option th:selected="${account != null && account.languagePreference == 'chinese'}" value="chinese">Chinese</option>
                <option th:selected="${account != null && account.languagePreference == 'japanese'}" value="japanese">Japanese</option>
            </select>
        </td>
    </tr>
    <!--<tr>
        <td>Favourite Category:</td>
        <td>
            <select name="favouriteCategoryId">
                <option th:value="${account.favouriteCategoryId}" th:text="${account.favouriteCategoryId}"></option>
                <th:block th:each="categoryId : ${idList}">
                    <option th:if="${account.favouriteCategoryId != categoryId}" th:value="${categoryId}" th:text="${categoryId}"></option>
                </th:block>
            </select>
        </td>
    </tr>-->
    <tr>
        <td class="td">Enable MyList</td>
        <td class="check">
            <input type="radio" name="listOption" th:checked="${account.listOption==true}" />
            <label for="enableBannerNo">yes</label>
        </td>
        <td class="check">
            <input type="radio" name="listOption" th:checked="${account.listOption==false}" />
            <label for="enableBannerNo">no</label>
        </td>
    </tr>
    <tr>
        <td class="td">Enable MyBanner</td>
        <td class="check">
            <input type="radio" id="enableBannerYes" name="enableBanner" value="yes" th:checked="${account.bannerName !=null }" />
            <label for="enableBannerYes">yes</label>
        </td>
        <td class="check">
            <input type="radio" id="enableBannerNo" name="enableBanner" value="no" th:checked="${account.bannerName == null}" />
            <label for="enableBannerNo">no</label>
        </td>
    </tr>

</table>
</body>
</html>